<%@page import="java.util.Date"%>
<%@page import="java.util.List"%>
<%@page import="com.wodwl.entity.Post"%>
<%@page import="com.wodwl.entity.Bbs"%>
<%@page import="com.wodwl.entity.Blog"%>
<%@page import="com.wodwl.entity.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@include file="../templete/head.jsp"  %>
	<style type="text/css">
		
		.conbar{
			margin-top: 5px;
			margin-bottom: 10px;
			
		}
		.bbscon .con{
			width: 600px;
			margin-bottom:50px;
			text-indent: 2em; 
		}
		.post .post_btn1{
			width:600px;
			cursor:  pointer;
			color: #248ef4;
		}
		.post{
			margin-bottom: 10px;
		}
		.post ul{
			margin:0px;
			padding:0px;
			list-style-type: none;
		}
		.post li{
			height:100px;
			width:600px;
			display: block;
			margin-bottom: 5px;
			margin-top:5px;
			border-top: 1px solid #C5C5C5;
		}
		.post li#reply_box{
			height:140px;
			text-align: right;
		}
		.post .innerDiv{
			padding-left: 100px;
		}
		.post .innerDiv li{
			margin-top:5px;
			border-top: 1px  dotted #C5C5C5;
			width: 500px;
		}
		.post .innerDiv .right{
			width:460px;
		}
		
		.post .left{
			clear:both;
			float: left;
			text-align: center;
			width: 80px;
		}
		.post .left img{
			width: 60px;
			height: 60px;
		}
		.post .right{
			width:560px;
		}
		.post .right .bar{
			text-align: right;
		}
		.post .right .bar .mytime{
			float: left;
		}
		.post .right .con{
			text-align: left;
			padding-left:100px;
			padding-right: 10px;
			min-height: 60px;
			
		}
		.post .right .footer{
			text-align: right;
		}
		.post .right .more{
			color:#248ef4;
			cursor: pointer;
			margin-right: 160px;
		}
		.post .post_btn2,#cancel_btn{
			font-size: 10px;
			text-align: right;
		}
		.post textarea {
			width: 600px;
			height: 90px;
			margin-bottom: 10px;
		}
		.post .right .mylink{
			cursor:  pointer;
			color: #248ef4; 
		}
	</style>
</head>
<body >

	<%pageContext.setAttribute("linkType", "7");%>
	<%@include file="../templete/banner.jsp"  %>
	<%
		Bbs bbs = (Bbs) request.getAttribute("bbs");
		List<Post> postList=(List<Post>)request.getAttribute("postList");
	%>


		
	<div class="mainRight">
		<div class="mainRightBar">
			<div class="title"><%=bbs.getTitle()%></div>
		</div>
		<div class="content">
				<div class="bbscon">
					<div class="conbar">
						<span>
							作者：
						</span>
						<span>
							<a href="/user/info_display.do?username=<%=user.getUsername()%>&request_username=<%=bbs.getUsername()%>">
								<%=bbs.getUsername()%>
							</a>
						</span>
						<span>
							<%=sdf.format(bbs.getCreate_time())%>
						</span>
						<span>
							<%if (bbs.getUsername().equals(user.getUsername())) {%>
								<a href="/bbs/bbs_editor1.do?username=<%=user.getUsername()%>&bid=<%=bbs.getBid()%>">编辑</a>
							<%}%>
						</span>
					  </div>
					 <div class="con"> 
					 	<%=bbs.getContent()%>
					 </div>
				</div>
				
				<div class="post">			
					<div class="post_btn1" >发帖</div>
						<ul>
						<li class="li_first" style="display: none;"></li>
						<%
							for(int i=0;i<postList.size();i++){
								Post post=postList.get(i);
						%>
							<li class="outer" id="li_<%=post.getPid()%>" status="<%=post.getStatus() %>">				
								<div class="left">
									<img src="../../static/img1.jpg">
									<div class="user"><%=post.getFrom_user() %></div>
								</div>
								<div class="outer_right right">
									<div class="bar">
										<span class="mytime" ><%=sdf1.format(new Date(post.getCreate_time()))%></span>
										<span class="level" ><%=(i+1) %>楼#1层</span>
									</div>
									<div class="con">
										<%=post.getContent() %>
									</div>
									<div class="footer">
										<%if(post.getStatus()==Post.Status.Level1){%>
											<span class="more">展开楼层</span>
										<%} %>
										<span class="top mylink" >顶[<%=post.getTop_count()%>]</span>|
										<span class="reply mylink" >回复</span>|
										<a href="#">举报</a>
									</div>
								</div>
							 </li>
							<li class="li_after" style="display: none;"></li>
							<%} %>
							<li class="li_last" style="display: none;"></li>
							<li id="reply_box" class="outer_box">
								<form action="/bbs/post.do" method="post" class="postform">
									<input type="hidden"  name="status" value="-1">
									<input type="hidden"  name="pid" value="-1">
									<input type="hidden"  name="path" value="<%=bbs.getPath()%>">
									<input type="hidden"  name="bid" value="<%=bbs.getBid()%>">
									<input type="hidden"  name="from_user" value="<%=user.getUsername()%>">
									<input type="hidden"  name="to_user" value="<%=bbs.getUsername()%>">
									<div>
										<textarea name="content"  style="overflow:auto;"></textarea>
									</div>
									<div class="post_btn2">发帖</div>
									<div id="cancel_btn" style="display: none;">取消</div>
								</form>
							</li>
						</ul>
				</div>
		</div>
	</div>
</div>

<%@include file="../templete/footer.jsp"  %>
	
<script type="text/javascript">
	$(document).ready(function(){
		$(".write_bbs_btn").button();
		$(".write_bbs_btn").click(function(){
			window.location.href="/jsp/bbs/bbs_add.jsp";
		});
		$(".post li:last").css("border","none");
		$(".post_btn1").button();
		$(".post_btn2").button();
		$("#cancel_btn").button();
		$(".post_btn2").click(function(){
				var str=$("#reply_box textarea").text();
				var reg=/^回复\d楼#\d层:/;
				if(reg.test(str)){
					str=str.substring(str.indexOf(":")+1);
				}
				$("#reply_box textarea").text(str);
				$(".postform").submit();
		});
		$("#reply_box textarea").focus(function(){
			$(this).css("color","black");
		});
		var toggleFlag=true;
		$(".post_btn1").click(function(){
			if(toggleFlag){
				$("#cancel_btn").css("display","none");
				var li=$(".post .li_first");
				$("#reply_box").insertBefore(li);
	
				$("#reply_box :input[name='status']").val("-1");
				$("#reply_box :input[name='pid']").val("-1");
				$("#reply_box :input[name='from_user']").val("<%=user.getUsername()%>");
				$("#reply_box :input[name='to_user']").val("<%=bbs.getUsername()%>");
				$("#cancel_btn").css("display","inline-block");
			}else{
				$("#cancel_btn").click();
			}
			toggleFlag=!toggleFlag;
		});
		$("#cancel_btn").click(function(){
			var li=$(".post .li_last");
			$("#reply_box").insertAfter(li);
			$(this).css("display","none");
			$(".post textarea").css({"width":"600px"});
			$("#reply_box :input[name='status']").val("-1");
			$("#reply_box :input[name='pid']").val("-1");
			$("#reply_box :input[name='from_user']").val("<%=user.getUsername()%>");
			$("#reply_box :input[name='to_user']").val("<%=bbs.getUsername()%>");
		});
		
		
		register_event();//注册监听事件
		
		$(".post .more").click(function(){
			var outerLi=$(this).closest("li");
			var pid=outerLi.attr("id").substring(3);
			var innerDiv=$(".inner_"+pid);
			
			var flag=$(this).text();
			if(flag=="收起楼层"){//收起
				innerDiv.slideUp("slow");
				$(this).text("展开楼层");
				return;
			}

			if(innerDiv.length>0){
				innerDiv.slideDown("slow");
				$(this).text("收起楼层");
				return;
			}
			
			var postsArray=[];
			$.ajax({
				async:false,
				type: "POST",   
				url: "/bbs/open.do?path="+<%=bbs.getPath()%>+"&bid="+<%=bbs.getBid()%>+"&pid="+pid, 
				contentType: "application/json; charset=utf-8", 
				dataType: "json",       
				data: "",  
				success: function(res) { 
					postsArray=res.posts;
				}   
				});
			
			
			var innerDiv=$("<div>").addClass("inner_"+pid).addClass("innerDiv");
			var ul=$("<ul>");
			
			
			for(var i=0;i<postsArray.length;i++){
				var post=postsArray[i];
				var li=$("<li>").addClass("inner").attr("id","li_"+post.pid).attr("status",post.status);
				var leftDiv=$("<div>").addClass("left");
				var item=$("<img>").attr("src","../../static/img1.jpg");
				leftDiv.append(item);
				item=$("<div>").html(post.from_user);
				leftDiv.append(item);
				li.append(leftDiv);
				
				
				
				var rightDiv=$("<div>").addClass("inner_right").addClass("right");
				item=$("<div>").addClass("bar");
				var span=$("<span>").addClass("mytime");
				span.text(format_time(post.create_time));
				item.append(span);
				//计算楼层
				var str=outerLi.contents().find(".level").text();
				str=str.substring(0,str.indexOf("#"));
				span=$("<span>").addClass("level");
				span.text(str+"#"+(i+2)+"层");
				item.append(span);
				rightDiv.append(item);
				
				item=$("<div>").addClass("con").html(post.content);
				rightDiv.append(item);
				
				item=$("<div>").addClass("footer");
				span=$("<span>").addClass("top").addClass("mylink").html("顶["+post.top_count+"]");
				item.append(span);
				item.append("|");
				span=$("<span>").addClass("reply").addClass("mylink").html("回复");
				item.append(span);
				item.append("|");
				span=$("<span>").addClass("reply").addClass("mylink").html("举报");
				item.append(span);
				rightDiv.append(item);
				li.append(rightDiv);
				ul.append(li);
			}
			
			innerDiv.append(ul);
			/*
			var str='<div class="innerUl pid_'+$(this).attr("name")+'">\
						<ul>
							<li class="inner">
								<div class="left">
								<img src="../../static/img1.jpg">
								<div>张三</div>
								<div>等级：蚂蚁蛋</div>
							</div>
							<div class="right">
								<div class="bar">
									<span class="mytime" >2012-03-12 21:33:50</span>
									<span class="level" >1楼#1层</span>
								</div>
								<div class="con">
									content
								</div>
								<div class="footer">
									<span class="top mylink" name="11">顶[11]</span>|
									<span class="reply mylink" name="11">回复</span>|
									<a href="#">举报</a>
								</div>
							</li>
						</ul>
					</div>';
			var li=".post .li_"+$(this).attr("name");
			$(this).text("收起楼层");
			$(this).attr("title","fold");
			$(li).after(str);
			*/
			
			$(this).text("收起楼层");
			outerLi.after(innerDiv);
			
			register_event();//注册监听事件
		});
	});
	
	
	function format_time(time){
		var date=new Date();
		date.setTime(time);
		return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+
			   date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
	}
	
	function register_event(){
		//顶
		$(".post .right .top").click(function(){
			var li=$(this).closest("li");
			var pid=li.attr("id").substring(3);
			var str=$(this).text();
			str=str.substr(2,str.length-3);
			var result=parseInt(str)+1;
			$(this).text("顶["+result+"]").css("color","#C5C5C5");
			$(this).unbind("click");
			$.ajax({       
				type: "GET",   
				url: "/bbs/addTopCount.do?pid="+pid
				});
		});
		//点击回帖连接
		$(".post  .right .reply").click(function(){
			$("#reply_box :input[name='flag']").val("0");
			var flag=$(this).closest("div.right").attr("class");
			var li=$(this).closest("li");
			var pid;
			if(flag.indexOf("outer_right")!=-1){//第一层回帖
				pid=li.attr("id").substring(3);
				$("#reply_box").insertAfter(li.nextAll(".li_after:first"));
			}else{//第二层回帖
				pid=$(this).closest(".innerDiv").attr("class").substring(6);
				pid=pid.substring(0,pid.indexOf(" "));
				$("#reply_box").insertAfter($(this).closest("div.innerDiv").next("li.li_after:first"));
			}
			
			$("#reply_box :input[name='status']").val(li.attr("status"));
			$("#reply_box :input[name='pid']").val(pid);
			var to_user=li.contents().find(".user").text();
			$("#reply_box :input[name='from_user']").val("<%=user.getUsername()%>");
			$("#reply_box :input[name='to_user']").val(to_user);
			$("#cancel_btn").css("display","inline-block");
			// window.location.hash="#reply_box";
			$('html, body').animate({
				   scrollTop: $("#reply_box").offset().top-300
			 },1000);
			$("#reply_box textarea").css("color","#248ef4");
			$("#reply_box textarea").text("回复"+li.contents().find(".level").text()+":");
			
		});
		
		
	}
</script>
</body>
</html>